<template>
    <div>
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for ='(item,index) in lunBoList' :key="index" >
              <img :src="item.img" alt="">
            </mt-swipe-item>
        </mt-swipe>

        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <router-link to="/home/newlist">
		                    <!-- <img src="../images/menu1.png" alt=""> -->
                        <img src="../../images/menu1.png" alt="">
		                    <div class="mui-media-body">Home</div>  </router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu1.png" alt="">
		                    <div class="mui-media-body">Email</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                   <img src="../../images/menu1.png" alt="">
		                    <div class="mui-media-body">Chat</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu1.png" alt="">
		                    <div class="mui-media-body">location</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                   <img src="../../images/menu1.png" alt="">
		                    <div class="mui-media-body">Search</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu1.png" alt="">
		                    <div class="mui-media-body">Phone</div></a></li>
		        </ul>
       
    </div>
</template>

<script>

import { Toast } from "mint-ui";

export default {

    data(){
      return{
          lunBoList:[] //轮播图的数组
      }
    },
    created() {
      
      this.getLunBoList();
    },
    methods:{
      
      getLunBoList(){
        this.$http.get('api/getlunbo').then(result => {
          if (result.body.status === 0) {
             this.lunBoList = result.body.message
            //console.log('请求成功--$(this.lunBoList)');
          }else{
            Toast('请求失败');
          }
        });
      }
    }
}
</script>

<style lang="scss">
.mint-swipe{
    height: 200px;
    // .mint-swipe-item{
    //     background-color: red;
    // }
    .mint-swipe-item{
        &:nth-child(1){
          background-color: red;
        }
        &:nth-child(2){
          background-color: blue;
        }
        &:nth-child(3){
          background-color: cyan;
        }
        img{
          width: 100%;
          height: 100%;
        }

    }

}

.mui-grid-view.mui-grid-9{
  background-color: #fff;

  img{
    width: 60px;
    height: 60px;
  }
  mui-media-body{
    font-size: 14px;
  }

}

.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  border: 0px;
}

</style>